<template>
	<view class="pl-24 pr-24 pt-24">
		<view class="col777 fz28" style="line-height:50upx;">
			<view v-html="content"></view>
		</view>
		<view v-for="(row,idx) in list">
			<view class="mt-24 col333 fz30 tcenter">
               {{row.title}}
			</view>
			<view class="list-box">
				<view v-for="(item,index) in row.child" class="bb row-box">
					<view class="ltext">低于{{item.length}}米</view>
					<view class="rtext">
						<view class="rcont">{{item.starting_price}}元/次</view>
					</view>
				</view>
			</view>
			<view style="height:96upx;width:100%;"></view>
		</view>
		<!-- <view style="margin-top:96upx;" class="mt-24 col333 fz30 tcenter">
			中面
		</view>
		<view class="list-box">
			<view v-for="(item,index) in 8" class="bb row-box">
				<view class="ltext">低于6.8米</view>
				<view class="rtext">
					<view class="rcont">50元/次</view>
				</view>
			</view>
		</view> -->



	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				content: "",
				param: {}
			}
		},
		onShow() {
			this.getList();
		},

		methods: {
			getList() {
				var rdata = {};
				this.$api['get']("base/vehicle-cost", this.param).then(res => {
					if (res.code == 200) {
						this.list = res.data.list;
						this.content = res.data.config;
					}
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	page {
		background: #fff;
	}

	.bb {
		border-bottom: 1upx solid #CCCCCC;
	}

	.list-box {
		margin-top: 24upx;
		overflow: hidden;
		border-left: 1upx solid #CCCCCC;
		border-right: 1upx solid #CCCCCC;
		border-top: 1upx solid #CCCCCC;
	}

	.row-box {
		overflow: hidden;
	}

	.ltext {
		width: 30%;
		float: left;
		text-align: center;
		background: #F6F6F6;
		padding: 24upx 0;
	}

	.rtext {
		width: 70%;
		float: right;
		text-align: left;

		.rcont {
			padding: 24upx 32upx;
			border-left: 1upx solid #CCCCCC;
		}
	}
</style>